<template>
    <div class="login_page">
        <div class="login_form">
            <Form ref="login" :model="loginData" :rules="validRule">
                <FormItem prop="telephone">
                    <Input size="large" v-model.trim="loginData.telephone" />
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" size="large" v-model.trim="loginData.password" />
                </FormItem>
                <FormItem prop="checkCode">
                    <Input size="large" v-model.trim="loginData.checkCode" placeholder="请输入手机验证码">
                    <span slot="append">
                        <Button @click="showCheckModal">{{codeBtnName}}</Button>
                    </span>
                    </Input>
                </FormItem>
            </Form>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'login',
        data() {
            return {
                codeBtnName: '验证码',
                loginData: {
                    telephone: '',
                    password: '',
                    city: 'sjz'
                },
                validRule: {
                    telephone: [{
                        required: true,
                        message: '请输入正确格式的电话',
                        trigger: 'buur',
                        pattern: /^((1[3456789]\d{9})|(0317\d{7}))$/,
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    checkCode: [{
                        required: true,
                        trigger: "blur",
                        message: "请填写验证码"
                    }]
                }
            }
        },
        methods: {
            showCheckModal() {
                

            }
        }
    }
</script>

<style lang="scss" scoped>
    .login_page {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-image: url("~@/assets/images/preview.jpg");
        background-size: cover;
        background-position: center;
    }
</style>